<template>
  <div class="main-box max-width divscroll">
    <van-row class="body-box">
        <img src="@/assets/images/head-title.png" class="pic">
    </van-row>
    <van-row class="vote-main">
        <van-row class="itme-display" v-for="(sub, index) in voteListData" :key="index">
          <van-row class="title">
            {{sub.groupName}}
            <!-- <span v-if="sub.excellentMaxCount!=null" style="font-size: 12px;">（优秀不超过{{sub.excellentMaxCount}}人）</span> -->
          </van-row>
          <van-row class="subtitle"><h5>高平组</h5></van-row>
          <!-- class="on" 是高亮 -->
          <van-row :class='["vote-box "+(items.active?"on":"")]' v-for="(items,idx) in sub.subList" :key="idx">
            <van-col>
              <van-row class="vote-top">
                <van-col class="name">{{items.userName}}<span> - {{items.unitName}}</span></van-col>
                <!-- <van-col class="fraction">{{items.quantifiedScore==null?'0':items.quantifiedScore}}</van-col> -->
              </van-row>
              <van-row class="vote-item" justify="center">
                <van-col class="vote-block" v-for="(item,ids) in items.voteList" :key="ids">
                  <van-row class="name">{{ item.unitName }}</van-row>
                  <van-row class="radio-box">
                    <van-col>
                      <van-radio-group :disabled="hasVoted" id="key123"  :rules="[{ required: true, message: '请投票' }]" v-model="item.voteStatus" direction="horizontal" class="display-vote">
                        <van-radio checked-color="#29b336" v-for="(itd,id) in item.scoreList" @click="changeVote(items,sub,index)" :key="id" :name="id">{{ itd.voteScore }}</van-radio>
                      </van-radio-group>
                    </van-col>
                  </van-row>
                </van-col>
              </van-row>
            </van-col>
            <van-col class="tag">{{idx+1}}</van-col>
          </van-row>
        </van-row>
    </van-row>
    <van-row v-if="!hasVoted" class="bnt-bottom-box">
      <van-col class="input">
       <!-- <van-checkbox v-model="checked" class="sel" @click="selectAll()">{{votetit}}</van-checkbox> -->
      </van-col>
      <van-button type="default" class="button"  @click="onSubmit">确定提交</van-button>
    </van-row>
    <van-popup v-model="tisBox" :close-on-click-overlay="false" style="background-color:transparent;">
      <van-row class="tisp-box">
        <van-col class="tisp-tit">消息提醒</van-col>
        <van-col class="tisp-content">
          您投票已完成
          <span>可实时查看投票结果！</span>
        </van-col>
        <van-button type="default" class="button" @click="hidePopup">马上去看看</van-button>
      </van-row>
    </van-popup>
    <div class="block_80"></div>
  </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      votetit:'全选合格',
      tisBox: false,
      checked: false,
      username: '',
      hasVoted: false,
      list:[
        {
          groupName:'信息事业部',
          excellentMaxCount:'3',
          subList:[
            {
              id:1,
              userNo:1,
              voteStatus:null,
              userName:'哈哈',
              unitName:'办公室',
              quantifiedScore:null,
              voteList:[
                {
                  unitName:'工作重点',
                  scoreList: [
                    {
                      voteScore:'40',
                      voteStatus:false
                    },
                    {
                      voteScore:'30',
                      voteStatus:false
                    },
                    {
                      voteScore:'20',
                      voteStatus:false
                    },
                    {
                      voteScore:'10',
                      voteStatus:false
                    }
                  ]
                },
                {
                  unitName:'工作进展',
                  scoreList: [
                    {
                      voteScore:'40',
                      voteStatus:false
                    },
                    {
                      voteScore:'30',
                      voteStatus:false
                    },
                    {
                      voteScore:'20',
                      voteStatus:false
                    },
                    {
                      voteScore:'10',
                      voteStatus:false
                    }
                  ]
                },
                {
                  unitName:'工作协同',
                  scoreList: [
                    {
                      voteScore:'10',
                      voteStatus:false
                    },
                    {
                      voteScore:'7.5',
                      voteStatus:false
                    },
                    {
                      voteScore:'5',
                      voteStatus:false
                    },
                    {
                      voteScore:'2.5',
                      voteStatus:false
                    }
                  ]
                },
                {
                  unitName:'团队建设',
                  scoreList: [
                    {
                      voteScore:'10',
                      voteStatus:false
                    },
                    {
                      voteScore:'7.5',
                      voteStatus:false
                    },
                    {
                      voteScore:'5',
                      voteStatus:false
                    },
                    {
                      voteScore:'2.5',
                      voteStatus:false
                    }
                  ]
                }
              ]
            },
            {
              id:1,
              userNo:1,
              voteStatus:null,
              userName:'哈哈',
              unitName:'办公室',
              quantifiedScore:null,
              voteList:[
                {
                  unitName:'工作重点',
                  scoreList: [
                    {
                      voteScore:'40',
                      voteStatus:false
                    },
                    {
                      voteScore:'30',
                      voteStatus:false
                    },
                    {
                      voteScore:'20',
                      voteStatus:false
                    },
                    {
                      voteScore:'10',
                      voteStatus:false
                    }
                  ]
                },
                {
                  unitName:'工作进展',
                  scoreList: [
                    {
                      voteScore:'40',
                      voteStatus:false
                    },
                    {
                      voteScore:'30',
                      voteStatus:false
                    },
                    {
                      voteScore:'20',
                      voteStatus:false
                    },
                    {
                      voteScore:'10',
                      voteStatus:false
                    }
                  ]
                },
                {
                  unitName:'工作协同',
                  scoreList: [
                    {
                      voteScore:'10',
                      voteStatus:false
                    },
                    {
                      voteScore:'7.5',
                      voteStatus:false
                    },
                    {
                      voteScore:'5',
                      voteStatus:false
                    },
                    {
                      voteScore:'2.5',
                      voteStatus:false
                    }
                  ]
                },
                {
                  unitName:'团队建设',
                  scoreList: [
                    {
                      voteScore:'10',
                      voteStatus:false
                    },
                    {
                      voteScore:'7.5',
                      voteStatus:false
                    },
                    {
                      voteScore:'5',
                      voteStatus:false
                    },
                    {
                      voteScore:'2.5',
                      voteStatus:false
                    }
                  ]
                }
              ]
            }
          ]
        },

        {
          groupName:'信息事业2部',
          excellentMaxCount:'3',
          subList:[
            {
              id:1,
              userNo:1,
              voteStatus:null,
              userName:'哈哈',
              unitName:'办公室',
              quantifiedScore:null,
              voteList:[
                {
                  unitName:'工作重点',
                  scoreList: [
                    {
                      voteScore:'40',
                      voteStatus:false
                    },
                    {
                      voteScore:'30',
                      voteStatus:false
                    },
                    {
                      voteScore:'20',
                      voteStatus:false
                    },
                    {
                      voteScore:'10',
                      voteStatus:false
                    }
                  ]
                },
                {
                  unitName:'工作进展',
                  scoreList: [
                    {
                      voteScore:'40',
                      voteStatus:false
                    },
                    {
                      voteScore:'30',
                      voteStatus:false
                    },
                    {
                      voteScore:'20',
                      voteStatus:false
                    },
                    {
                      voteScore:'10',
                      voteStatus:false
                    }
                  ]
                },
                {
                  unitName:'工作协同',
                  scoreList: [
                    {
                      voteScore:'10',
                      voteStatus:false
                    },
                    {
                      voteScore:'7.5',
                      voteStatus:false
                    },
                    {
                      voteScore:'5',
                      voteStatus:false
                    },
                    {
                      voteScore:'2.5',
                      voteStatus:false
                    }
                  ]
                },
                {
                  unitName:'团队建设',
                  scoreList: [
                    {
                      voteScore:'10',
                      voteStatus:false
                    },
                    {
                      voteScore:'7.5',
                      voteStatus:false
                    },
                    {
                      voteScore:'5',
                      voteStatus:false
                    },
                    {
                      voteScore:'2.5',
                      voteStatus:false
                    }
                  ]
                }
              ]
            },
            {
              id:1,
              userNo:1,
              voteStatus:null,
              userName:'哈哈',
              unitName:'办公室',
              quantifiedScore:null,
              voteList:[
                {
                  unitName:'工作重点',
                  scoreList: [
                    {
                      voteScore:'40',
                      voteStatus:false
                    },
                    {
                      voteScore:'30',
                      voteStatus:false
                    },
                    {
                      voteScore:'20',
                      voteStatus:false
                    },
                    {
                      voteScore:'10',
                      voteStatus:false
                    }
                  ]
                },
                {
                  unitName:'工作进展',
                  scoreList: [
                    {
                      voteScore:'40',
                      voteStatus:false
                    },
                    {
                      voteScore:'30',
                      voteStatus:false
                    },
                    {
                      voteScore:'20',
                      voteStatus:false
                    },
                    {
                      voteScore:'10',
                      voteStatus:false
                    }
                  ]
                },
                {
                  unitName:'工作协同',
                  scoreList: [
                    {
                      voteScore:'10',
                      voteStatus:false
                    },
                    {
                      voteScore:'7.5',
                      voteStatus:false
                    },
                    {
                      voteScore:'5',
                      voteStatus:false
                    },
                    {
                      voteScore:'2.5',
                      voteStatus:false
                    }
                  ]
                },
                {
                  unitName:'团队建设',
                  scoreList: [
                    {
                      voteScore:'10',
                      voteStatus:false
                    },
                    {
                      voteScore:'7.5',
                      voteStatus:false
                    },
                    {
                      voteScore:'5',
                      voteStatus:false
                    },
                    {
                      voteScore:'2.5',
                      voteStatus:false
                    }
                  ]
                }
              ]
            }
          ]
        }
      ],
      voteStatusList:[],
      form:{
        data: this.$route.query.data,
        // data: '8CBA4295B735AB496A4454CCA27561347A9B6C6B2C009988DFC0DFF7513FDDD68C911604AD3F9099C5599937BD212BAB',//this.$route.query.data,
        voteStatusList:[
          // {voteStatus:null,userName:null,quantifiedScore:null}
        ]
      }
    }
  },
  computed:{
    voteListData(){
      return this.list;
    }
  },
  methods: {
    onSubmit(){

      let hasVote=true;

      this.list.forEach((sub,index) => {
        sub.subList.forEach((item,idx) => {
          if(item.voteStatus==null){
            item.active = true;
            hasVote = false;
            
          }
          let params = {
            id:item.id,
            userNo:item.mobile,
            voteStatus:item.voteStatus,
            userName:item.userName,
            quantifiedScore:item.quantifiedScore
          }
          this.form.voteStatusList.push(params);
        })
        this.$set(this.list,index,sub);
      });

      
      if(!hasVote){
        this.$toast("您还有未选择的投票!");
        // this.$set(this,'list',this.list);
        this.form.voteStatusList=[];
        return 
      }

      this.$dialog.confirm({  title: '确认', message: '是否确认提交投票信息，提交后不可修改！',})
      .then(() => {

        this.tisBox = true;
        this.$toast.loading({duration: 0, message: '提交中...', forbidClick: true,});
        // 提交请求
        this.$axios.vote.updateResult(this.form).then((res) => {
          this.$toast.clear();
          if(res.data.code==0){
            this.$toast("投票成功!");
            this.hasVoted=true;
            return ;
          }
          this.$toast(res.data.msg);
        }).catch((err) => {
          this.$toast("服务器请求失败~");
          this.$toast.clear();
        })
      })
      .catch(() => {
        // on cancel
      });


    },
    hidePopup(){
      this.tisBox = false;
    },
    changeVote(item,sub,subIndex){


      if(sub.excellentMaxCount==null)
         return;
      
      let excellentCount = sub.subList.filter(s=>s.voteStatus==1).length;
      console.log(sub)
      console.log(excellentCount)
      if(excellentCount >sub.excellentMaxCount){
        this.$toast('优秀人数不能超过'+sub.excellentMaxCount+"人");
        item.active = true;
        item.voteStatus=null;
      }else{
        item.active = false;
      }
      this.$set(this.list,subIndex,sub);

    },


    //全选合格、取消合格
    selectAll(){
      let tisp=this.checked?'全选合格':'取消全选合格';
      this.$dialog.confirm({  title: '确认', message: '是否确认'+tisp+'，'+tisp+'后之前选项也会改变！',})
      .then(() => {
        let val = this.checked?2:null;
        this.list.forEach((item,index) => {
          item.subList.forEach((items,idx) => {
            items['voteStatus'] = val;
          })
          this.votetit=this.checked?'取消全选合格':'全选合格';
        })
      }).catch(() => {
        this.checked =!this.checked;
      });

    },
    getVoteList(){
      
      this.$axios.vote.voteList({data:this.form.data}).then((res) => {
        this.list = res.data.data;

        this.list.forEach((sub,index) => {
          sub.subList.forEach((item,idx) => {
            item.active = false;
          })
         
        });
        
      }).catch((err) => {
        // this.$toast("服务器请求失败~");
      })
    },
    userIsVoted(){
      this.$axios.vote.userIsVote({data:this.form.data}).then((res) => {
        if(res.data.data){
          this.$axios.vote.votedResultList({data:this.form.data}).then(res=>{
            this.list = res.data.data;
            this.tisBox = true;
            this.hasVoted = true;
          })
        }else{
          this.hasVoted = false;
          this.getVoteList()
        }

      }).catch((err) => {
        this.$toast("服务器请求失败~");
      })
    },

    getVoteInfo(){
      this.$axios.vote.voteInfo({data:this.form.data}).then((res) => {
        if(res.data.data){
          let vote =res.data.data;
          let currDate = new Date();
          let betweenTime = vote.beginTime>currDate || vote.endTime<currDate
          if(!vote.isPush || betweenTime){
            vote.data = this.form.data
            this.$router.push({
                name: "tips",
                params: { vote: vote },
            });
          }
        }

      })
    }


  },
  created() {
    //this.getVoteList();
    // this.getVoteInfo();
    this.userIsVoted();
  },
};
</script>
<style lang="scss">
.main-box{
  background-color: #e5f2ff !important;
}
.subtitle{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem 0 1rem 0;
  &:before{
    content: '';
    height: 1px;
    background-color: #E4E4E4;
    flex:1;
  }
  h5{
    margin:0 .5rem;
    background-color: #FFF;
    padding: .25rem 2rem;
    border-radius: .25rem;
    color:#666;
  }
  &:after{
    content: '';
    height: 1px;
    background-color: #E4E4E4;
    flex:1;
  }
}
.tisp-box{
  background-image: url('../assets/images/tisp-bg.png');
  background-repeat: no-repeat;
  background-position: top center;
  width: 18.75rem;
  height: 23.75rem;
  background-size: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  .tisp-tit{
    font-size: $wdr-oneTitle-fontSize;
    line-height: 7.75rem;
    color: #FFF;
    font-weight: 700;
  }
  .tisp-content{
    margin-top: 5.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: $wdr-twoTitle-fontSize;
    font-weight: 700;
    span{
      color: $wdr-assist-fontColor;
      font-size: $wdr-main-fontSize;
      font-weight: normal;
    }
  }
  .button{
    margin-top: 3.55rem;
    background-color: #3b3fc0;
    color: #FFF;
    border-radius: 1.875rem;
    padding: 0 1.25rem;
    border: 0;
    font-weight: 700 !important;
  }
}
.bnt-bottom-box{
  height: 3.75rem;
  background-color: #1d92ff;
  position: fixed;
  width: 100%;
  padding: 0 .625rem;
  bottom: 0;
  left: 0;
  display: flex;
  // justify-content: center;
  align-items: center;
  justify-content: space-between;
  .input{
    flex: 1;
    color: #FFF !important;
    font-size: $wdr-threeTitle-fontSize;
    .sel{
      display: inline-flex;
      .van-checkbox__label{
        color: #FFF !important;
      }
    }
  }
  .button{
    min-width: 9.375rem;
    height: 2.5rem;
    line-height: 2.5rem;
    border-radius: 1.25rem;
    box-shadow: 0 5px 5px -4px #1c81df;
    color: #1d92ff !important;
    .van-button__text{
      font-size: $wdr-threeTitle-fontSize;
      font-weight: 700 !important;
    }
  }
}
.body-box{
  background-color: transparent !important;
  background-image: url('../assets/images/head-bg.png');
  background-repeat: no-repeat;
  background-position: center -2.5rem;
  margin: 0 auto;
  height: 30.9vh;
  background-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .pic{
    display: flex;
    width: 68vw;
    margin-top: -10vw;
  }
  // &:after{
  //   border: 0;
  // }
}
.vote-main{
  margin-top: -2.5rem !important;
  .itme-display{
    .title{
      // background-color: #4d88ef;
      background-image: url(../assets/images/moduleClassification.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      height: 3.5rem;
      line-height: 3.5rem;
      color: #FFF;
      // border-radius: 1.25rem 1.25rem 0 0;
      padding: 0 .9375rem;
      font-weight: 700;
      text-align: center;
      font-size: $wdr-threeTitle-fontSize;
    }
    .vote-box{
      &.on{
        // border:1px solid red;
        box-shadow: 0 0 5px 2px red;
      }
      margin: .725rem .725rem 0 .725rem;
      background-color: #FFF;
      display: flex;
      flex-direction: column;
      border-radius: .625rem;
      position: relative;
      .tag{
        position: absolute;
        right: 0;
        background-color: #1d92ff;
        color:#FFF;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 2.5rem;
        height: 1.875rem;
        border-radius: 0 .625rem 0 .9375rem;
      }
      .display-vote{
        padding: .625rem;
      }
      .vote-top{
        display: flex;
        justify-content: space-between;
        padding: .625rem .625rem 0 .625rem;
        .name{
          flex: 1;
          color: #4d88ef;
          font-weight: 700;
          font-size: $wdr-threeTitle-fontSize !important;
          span{
            font-size: $wdr-explain-fontSize !important;
            color: $wdr-assist-fontColor !important;
            font-weight: normal;
          }
        }
        .fraction{
          color:red;
          padding-right: 2.5rem;
        }
      }
      .vote-item{
        padding: .625rem;
        display: flex;
        .vote-block{
          border:1px solid #E4E4E4;
          border-radius: .5rem;
          flex:1;
          width: auto;
          .name{
            font-size: .75rem;
            padding: .525rem .625rem 0 .625rem;
          }
          .radio-box{
            .van-radio+.van-radio{
              margin-top: .6rem;
            }
          }
        }
        .vote-block+.vote-block{
          margin-left: .6rem;
        }
      }
      .van-field{
        background-color: transparent !important;
      }
      .van-radio{
        font-size: $wdr-main-fontSize !important;
      }
      .van-radio:last-child{
        margin-right: 0;
      }
    }
  }
  .itme-display+.itme-display{
    margin-top: 1.25rem;
  }
}
</style>